<template>
  <view class="service-panel">
    <!-- 关闭按钮 -->
    <!-- <text class="close icon-close" @tap="emit('close')"></text> -->
    <!-- 标题 -->
    <view class="title">下单</view>
    <!-- 内容 -->
    <view class="content">
      <view class="dc"  @click="handleTap(0)" :class="currentType == 0?'highlighted' : ''">
        <text>单次 3 元</text>
      </view>
      <view class="dc"  @click="handleTap(1)" :class="currentType == 1?'highlighted' : ''">
        <text>包月 20 元</text>
      </view>
      <view class="dc"  @click="handleTap(2)" :class="currentType == 2?'highlighted' : ''">
        <text>包年 200 元</text>
      </view>
    </view>
    <view class="footer">
      <view class="button primary" @click="xia"> 立即下单 </view>

    </view>
  </view>
</template>
<script>
import { createorder } from '@/services/login'
	export default {
    props: {
        wxUser: String,
      },
		data() {
			return {
        currentType:0
			}
		},
		onShow() {

		},
		methods: {
      handleTap(num){
        this.currentType = num
      },
      async xia(){
        const res = await createorder({
          token:this.wxUser.token,
          order_type: this.currentType == '0'?'single':(this.currentType == '1'?'monthly':'yearly')
        })
        if(res.order_id){
          uni.showToast({ title: "下单成功", icon: "none", duration: 1000 });
        }
        setTimeout(()=>{
          this.$emit('close')
          uni.navigateTo({
            url:`/pagesOrder/create/create?id=${res.order_id}`
          })
        },500)

        console.log(res,'21221');
      }

		}
	}
</script>
<style lang="scss">
  .highlighted {
    background-color: #ffa868; /* 这里设置高亮时的背景颜色 */
    color: #fff;
  }
.dc {
  border-radius: 10px;
  border: 1px solid #ddd;
  display: flex;
  width: max-content;
  padding: 28rpx;
}
.service-panel {
  padding: 0 30rpx;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  background-color: #fff;
}

.title {
  line-height: 1;
  padding: 40rpx 0;
  text-align: center;
  font-size: 32rpx;
  font-weight: normal;
  border-bottom: 1rpx solid #ddd;
  color: #444;
}

.close {
  position: absolute;
  right: 24rpx;
  top: 24rpx;
}

.content {
  margin-top: 40rpx;
  padding: 20rpx 20rpx 100rpx 20rpx;
  display: flex;
  justify-content: space-around;
  .item {
    margin-top: 20rpx;
  }

  .dt {
    margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    position: relative;

    &::before {
      content: '';
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      background-color: #eaeaea;
      transform: translateY(-50%);
      position: absolute;
      top: 50%;
      left: -20rpx;
    }
  }

  .dd {
    line-height: 1.6;
    font-size: 26rpx;
    color: #999;
  }
}
.footer {
  display: flex;
  justify-content: space-between;
  padding: 0rpx 0 40rpx;
  font-size: 28rpx;
  color: #444;

  .button {
    flex: 1;
    height: 72rpx;
    text-align: center;
    line-height: 72rpx;
    margin: 0 20rpx;
    color: #fff;
    border-radius: 72rpx;
  }

  .primary {
    color: #fff;
    background-color: #ffa868;
  }

  .secondary {
    background-color: #ffa868;
  }
}
</style>
